<template>
  <div v-if="isLogin">
    <!--  导航栏-->
    <div style="height: 46px">
      <van-nav-bar
          class="fixed-nav-bar"
          :title="title"
          left-arrow
          @click-left="onClickLeft"
          @click-right="onClickRight"
      >
        <template #right>
          <van-icon name="search" size="18"/>
        </template>
      </van-nav-bar>

    </div>

    <router-view/>
    <van-tabbar route>
      <van-tabbar-item to="/explore" icon="home-o" name="index">灵界初探</van-tabbar-item>
      <van-tabbar-item to="/team" icon="search" name="team">仙缘寻契</van-tabbar-item>
      <van-tabbar-item to="/user" icon="friends-o" name="user">灵府修真</van-tabbar-item>
    </van-tabbar>
  </div>
  <div v-else>
    <user-login-page @update:isLogin="isLogin = $event"/>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import routes from "../config/route.ts";
import type {UserType} from "../models/user";
import {getCurrentUser} from "../services/user.ts";
import UserLoginPage from "../pages/user/UserLoginPage.vue";

const router = useRouter();
const DEFAULT_TITLE = '交友平台';
const title = ref(DEFAULT_TITLE);

const onClickLeft = () => {
  router.back();
};

const onClickRight = () => {
  router.push('/search')
};

const isLogin = ref();
onMounted(async () => {
  const currentUser: UserType = await getCurrentUser()
  // console.log('currentUser', currentUser)
  if (currentUser) {
    isLogin.value = true;
  }
})
// const onChange = (index: string) => showToast(`标签 ${index}`);

router.beforeEach((to, from) => {
  const toPath = to.path;
  const route = routes.find((route) => {
    return toPath == route.path;
  })
  title.value = route?.title ?? DEFAULT_TITLE;
})

</script>

<style scoped>
.fixed-nav-bar {
  position: fixed; /* 固定在页面顶部 */
  top: 0; /* 距离顶部 0 */
  left: 0; /* 距离左侧 0 */
  width: 100%; /* 宽度占满整个屏幕 */
  z-index: 1000; /* 确保导航栏在其他内容之上 */
  background-color: white; /* 背景颜色，可根据需要调整 */
  height: 50px; /* 导航栏高度 */
}

/* 为内容区域添加内边距，防止被导航栏遮挡 */
#content {
  padding-top: 50px; /* 根据导航栏的高度调整 */
}
</style>